<template>
  <div class="gym-container">
    <div class="gym-header">
      <el-card class="box-card">
        <el-form :inline="true" :model="formSearch" class="demo-form-inline">
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="formSearch.startTime"
              type="datetime"
              placeholder="--请选择--"
            />
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="formSearch.endTime"
              type="datetime"
              placeholder="--请选择--"
            />
          </el-form-item>
          <el-form-item label="场馆类别">
            <el-select
              v-model="formSearch.type"
              clearable
              placeholder="--请选择--"
            >
              <el-option
                v-for="item in typeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="场馆名称">
            <el-input v-model="formSearch.name" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <div class="list-container">
        <!-- <el-table
          :data="tableData"
          :table-layout="tableLayout"
          :show-header="(cs = false)"
        >
          <el-table-column prop="name" />
          <el-table-column prop="name" />
          <el-table-column prop="address" />
        </el-table> -->
        <ListLayout v-for="list in tableData" :key="list" :gymItem="list" />
        <el-row>
          <el-col :span="12" :offset="8">
            <el-pagination
              background
              layout="total,prev, pager, next"
              v-model:total="formSearch.total"
              v-model:page-size="formSearch.pageSize"
              v-model:current-page="formSearch.page"
              @current-change="handleCurrentChange"
            />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import ListLayout from '@/components/List/ListLayout';
import { reactive, onBeforeMount, ref } from 'vue';
import { getGymList } from '@/network/gym.js';
import { getDicByDictionary } from '@/network/dictionary.js';
// const tableLayout = ref("auto");
//时间格式化
const rTime = (time) => {
  var date = new Date(time);
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? '0' + m : m;
  var d = date.getDate();
  d = d < 10 ? '0' + d : d;
  var h = date.getHours();
  h = h < 10 ? '0' + h : h;
  var minute = date.getMinutes();
  minute = minute < 10 ? '0' + minute : minute;
  var s = date.getSeconds();
  s = s < 10 ? '0' + s : s;
  return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s;
};
//搜索
const formSearch = reactive({
  startTime: `${new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)}`,
  endTime: `${new Date()}`,
  type: '',
  name: '',
  page: 1,
  pageSize: 10,
  total: 0,
});
let tableData = ref([]);
//分页变化时
const handleCurrentChange = async (val) => {
  formSearch.page = val;
  initData();
};
//初始化数据
const initData = async () => {
  let params = {
    startTime: rTime(formSearch.startTime),
    endTime: rTime(formSearch.endTime),
    type: formSearch.type,
    name: formSearch.name,
    page: formSearch.page,
    pageSize: formSearch.pageSize,
  };
  await getGymList(params).then((res) => {
    // console.log(res);
    tableData.value = res.data;
    formSearch.total = res.total;
  });
};
onBeforeMount(() => {
  initDic().then(() => {
    initData();
  });
});
//初始化字典
const typeOption = ref([]);
const initDic = async () => {
  await getDicByDictionary({
    type: 'VenuesType',
  }).then((res) => {
    typeOption.value = res;
  });
};
//查询
const onSubmit = async () => {
  initData();
};
</script>

<style lang="scss" scoped>
.gym-container {
  margin: 14px 15px 14px;
  // :deep(.el-card__body) {
  //   padding: 10px;
  // }
  .gym-header {
    .box-card {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-top: 14px;
    }
  }
  .list-container {
    margin-top: 14px;
  }
}
</style>
